<template>
    <div class="app-container">
        <el-form :model="queryParams"
                 ref="queryForm"
                 :inline="true"
                 v-show="showSearch"
                 label-width="80px"
        >
            <el-form-item label="用户编号" prop="userId">
                <el-input
                    v-model="queryParams.userId"
                    placeholder="请输入用户编号"
                    clearable
                    @keyup.enter="handleQuery"
                />
            </el-form-item>
            <el-form-item label="模板编码" prop="templateCode">
                <el-input
                    v-model="queryParams.templateCode"
                    placeholder="请输入模板编码"
                    clearable
                    @keyup.enter="handleQuery"
                />
            </el-form-item>
            <el-form-item label="模版类型" prop="templateType">
                <el-select
                    v-model="queryParams.templateType"
                    placeholder="请选择模版类型"
                    clearable
                >
                    <el-option
                        v-for="item in dict.type.system_notify_template_type"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="创建时间" prop="createTime">
                <el-date-picker
                    v-model="queryParams.createTime"
                    value-format="yyyy-MM-dd"
                    format="yyyy 年 MM 月 dd 日"
                    type="daterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :default-time="['00:00:00', '23:59:59']"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="notifyTemplateList">
            <el-table-column label="编号" align="center" prop="id" />
            <el-table-column label="用户编号" align="center" prop="userId" width="80" />
            <el-table-column label="模板编码" align="center" prop="templateCode" width="80" />
            <el-table-column label="发送人名称" align="center" prop="templateNickname" width="180" />
            <el-table-column
                label="模版内容"
                align="center"
                prop="templateContent"
                width="200"
                show-overflow-tooltip
            />
            <el-table-column
                label="模版参数"
                align="center"
                prop="templateParams"
                width="180"
                show-overflow-tooltip
            >
                <template slot-scope="scope"> {{ scope.row.templateParams }}</template>
            </el-table-column>
            <el-table-column label="模版类型" align="center" prop="templateType" width="120">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.system_notify_template_type" :value="scope.row.templateType"/>
                </template>
            </el-table-column>
            <el-table-column label="是否已读" align="center" prop="readStatus" width="100">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.infra_boolean_string" :value="scope.row.readStatus"/>
                </template>
            </el-table-column>
            <el-table-column label="阅读时间" align="center" prop="readTime" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.readTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="createTime" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        @click="handleDetail(scope.row)"
                    >详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
        <NotifyMessageDetail ref="detailRef" @success="getList"></NotifyMessageDetail>
    </div>
</template>

<script>

import NotifyMessageDetail from './dialog/NotifyMessageDetail.vue'
import {getNotifyMessagePage} from '@/api/system/notity/message'
export default {
    name: 'template',
    dicts: ['infra_boolean_string', 'system_notify_template_type'],
    components: {
        NotifyMessageDetail
    },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 信息表格数据
            notifyTemplateList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNo: 1,
                pageSize: 10,
                userType: undefined,
                userId: undefined,
                templateCode: undefined,
                templateType: undefined,
                createTime: []
            },
        }
    },
    created() {
        this.getList()
    },
    methods: {

        getList() {
            this.loading = true
            getNotifyMessagePage(this.queryParams).then(response => {
                this.notifyTemplateList = response.data.list
                this.total = response.data.total
                this.loading = false
            })
        },

        cancel() {
            this.open = false
            this.reset()
        },


        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },

        resetQuery() {
            this.resetForm('queryForm')
            this.handleQuery()
        },

        /** 详情操作 */
        handleDetail(row) {
            this.$refs.detailRef.open(row)
        },

        handleDelete(row) {
            this.$modal.confirm('是否确认删除这条数据').then(function () {
                return deleteNotifyTemplate(row.id)
            }).then(() => {
                this.getList()
                this.$modal.msgSuccess('删除成功')
            }).catch(() => {
            })
        },

    }
}
</script>
